<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div o-Container>
    <o-list v-bind:source="list.role"
            v-bind="{created:create,modified:modify}"/>
    <o-dialog v-bind:source="panel" v-bind="{opened:load,closed:load}">
      <template slot="content">
        <o-item v-bind:source="item.role" v-bind="{saved:save,backed:back,loaded:load,changed:change}"></o-item>
        <!--            {{functionCheckData}}-->
        <!--        <transition name="fade">-->
        <!--          <fieldset>-->
        <!--            <legend>授权项目及建筑</legend>-->
        <!--        <div v-for="node in tree_nodes">-->
        <!--          {{node.DisplayName}} : {{node.TypeID}}-->
        <!--        </div>-->
        <!--        {{project_list}} {{building_list}}-->
        <o-tree v-bind:source="tree.buildList" v-bind="{loaded:loadTree,checked:checkProjectAndBuilding}">
          <template v-slot:content="levelData">
            <div :class="'iconfont Level_'+levelData.row.node.TypeID" :title="JSON.stringify(levelData.row.node)">
              <!-- <span class="Title">{{levelData.row.node.IDCode}}:{{levelData.row.node.DisplayName}}</span>-->
              <span class="Title">{{levelData.row.node.DisplayName}}</span>
            </div>
            <!--            {{levelData.row.package.data}}-->
          </template>
        </o-tree>
        <!--          </fieldset>-->
        <!--        </transition>-->
        <div class="OctopusItem" title="角色权限配置面板。">
          <div class="Content">
            <el-tabs v-model="systemTab" @tab-click="handleClick">
              <el-tab-pane v-for="system in functionData.data.queryData" v-if="system.ParentID == 0"
                           v-bind="{label:system.Name,name:'sys_'+system.ID}"
                           :key="system.ID">
                <div v-for="(pkg,pkgIndex) in functionData.data.queryData" :key="pkgIndex"
                     v-if="pkg.ParentID == system.ID">
                  <div class="Package">
                    <el-checkbox :label="pkg.ID" :key="pkg.ID" border v-model="functionCheckData[pkg.ID]"
                                 @change="checkFunction">
                      {{pkg.Name}}
                    </el-checkbox>
                  </div>
                  <div class="PackageItem">
                    <el-checkbox v-for="fun in functionData.data.queryData" :label="fun.ID"
                                 :key="fun.ID" border v-model="functionCheckData[fun.ID]"
                                 @change="checkFunction" v-if="pkg.ID == fun.ParentID && reloadFunction">
                      {{fun.Name}}
                    </el-checkbox>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </template>
    </o-dialog>
  </div>
</template>

<script>
  export default {
    name: "mms_platform_role_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        systemTab: '',
        functionData: {data: {}},
        functionCheckData: {}, // 选中的功能包数据
        reloadFunction: true,
        list: {
          role: {
            data: {
              id: 10, // 角色数据源ID
              cellData: [
                {name: "CompanyID", width: 200, searchKey: "=", filterKey: "="},//公司
                {
                  name: "DepartmentID", width: 100, searchKey: "=", link: [{binding: "CompanyID", mapping: "CompanyID"}]//根据公司筛选
                },
                {name: "Name", width: 120, searchKey: "LIKE"},//名称
                {
                  name: "ProjectList", width: 120, searchKey: "LIKE",//项目列表link: [{binding: "CompanyID", mapping: "CompanyID"}]
                },
                {
                  name: "BuildingList", width: 120, searchKey: "LIKE",//站点列表link: [{binding: "ProjectList", mapping: "ProjectID"}]
                },
                {name: "Sort", width: 50},//
                {name: "FunctionData", width: 500},//功能数据
                {name: "CreateDate", width: 160},//创建时间
              ],
            }
          },
        },
        item: {
          role: {
            // 以下参数默认由组件内部创建，但是如果有需要，开发人员可在这里提前设置，组件将按照您的预期渲染。
            data: {
              id: 10,
              value: "",
              cellData: [
                {name: "CompanyID"},//公司
                {name: "DepartmentID", link: [{binding: "CompanyID", mapping: "CompanyID"}]},//根据公司筛选
                {name: "Name"},//名称
                {name: "Sort"},//排序
                {name: "CreateDate"},     //创建时间
                // {name: "ProjectList", link: [{binding: "CompanyID", mapping: "CompanyID"}]},//项目列表
                // {name: "BuildingList", link: [{binding: "ProjectList", mapping: "ProjectID"}]},//站点数据
                {name: "Note"},                         // 备注
                {name: "ProjectList", show: false},     // 项目列表
                {name: "BuildingList", show: false},    // 楼宇数据
                {name: "FunctionData", show: false},    // 功能包列表
              ]
            },
          },
        },
        tree: {
          // TODO 树组件属性，本组件支持八爪鱼多数据源组合嵌套。
          buildList: {
            title: "授权项目及建筑",
            data: {
              id: 1080,                   // 数据源：公司表
              // primaryKey: "IDCode",       // 树菜单必备字段，必须提前传入，否则el-tree控件将无法自动绑定。
              // parentKey: "ParentCode",    // 是否是层级，如果标记了这个属性，则说明该数据源是层级数据源。
              // parentValue: "",            // "A_17",
              cellData: [
                {name: "ParentCode"},	// ParentCode
                {name: "IDCode"},	// IDCode
                {name: "DisplayName"},	// FullName
                {name: "ParentID"},	// ParentID
                {name: "ID"},	// ParentID
                {name: "TypeID"},	// TypeID
              ],
              height: "500px",    // 自定义控件高度
            }
          }
        },
        // tree_nodes: [],
        project_list: [],
        building_list: [],
        panel: {
          visible: false,
        },
      }
    },
    created: function () {
      this.init();
    },
    activated: function () {
      this.initFunction();
    },
    methods: {
      init: function () {
        let url = this.octopus.vue.$route.path;

        // MMS
        if (url.indexOf("MMS/Organization/Role/List") > 0) {
          //
        }
        // MDM
        else {
          // alert(this.octopus.passport.authorization.company);
          this.octopus.tools.parseCell(this.list.role.data, "CompanyID").searchKey = null;
          this.octopus.tools.parseCell(this.list.role.data, "CompanyID").filterValue = this.octopus.passport.authorization.company;
          // this.octopus.tools.parseCell(this.list.role.data, "CompanyID").filterValue = this.octopus.passport.authorization.company == 1 ? '' : this.octopus.passport.authorization.company;
          this.octopus.tools.parseCell(this.list.role.data, "DepartmentID").link = [{
            mapping: "CompanyID",
            value: this.octopus.passport.authorization.company
          }];
        }


      },
      create: function () {
        this.loadData(null);
      },
      modify: function (row) {
        this.loadData(row.ID);
      },
      change(data) {//同一个Code，不能有相同的KeyValue
        // 如果变更公司，则要变更树控件。
        if (data.name == "CompanyID") {
          // let treeID = this.octopus.passport.authorization.company;
          // 变更公司后，清空绑定关系。
          this.octopus.tools.parseCell(this.item.role.data, "ProjectList").defaultValue = null;
          this.octopus.tools.parseCell(this.item.role.data, "BuildingList").defaultValue = null;
          // 设置树状菜单，清空选中的目标及变更父级字段。
          this.tree.buildList.control.setCheckedKeys([]);
          this.tree.buildList.data.parentValue = "A_" + data.defaultValue;
          this.tree.buildList.control.load();
        }
      },
      // 重载的加载数据，不是监听的load。
      loadData: function (value) {
        this.panel.visible = true;
        this.functionCheckData = {};
        this.reloadFunction = true;
        this.item.role.data.value = value;
        this.item.role.control.load();
        this.tree.buildList.data.parentValue = "";
        this.tree.buildList.control.load();
      },
      // 功能包没有必要反复加载，仅加载一次就可以。
      initFunction: function () {
        let o = this;
        // 请求后台八爪鱼API框架。
        this.octopus.request.api.post("/Octopus/Engine/List", {
            id: 71,
            orderData: "Sort ASC",
            cellData: [
              {name: "Name"},
              {name: "ParentID"},
            ],
            pageData: {
              index: 1, listSize: 10, rowSize: 9999 // 功能包，全部加载。
            }
          },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code == 200) {
              o.$set(o.functionData, "data", data.content);
            } else {
              o.octopus.tips.error(data);
            }
          });
      },
      // 角色数据加载完成返回，此处创建有缺陷
      load: function (data) {
        let o = this;
        // 加载绑定数据的时候一定要清空，否则加载绑定数据时，不会把之前加载的给去掉。
        // this.functionCheckData = {};
        // 如果是编辑状态
        if (!this.octopus.tools.IsNullOrEmpty(data.content.value)) {
          let FunctionDataColumn = $.grep(data.content.cellData, function (value) {
            return value.name == "FunctionData";//筛选出当前数据列数据
          });
          if (FunctionDataColumn) {
            let fData = FunctionDataColumn[0];
            // 加载赋值，如果为空则设置为空，否则element-ui会报错，他的复选框group的对象不能为null。
            // alert(fData.defaultValue);
            $(fData.defaultValue || []).each(function (index, item) {
              if (!o.octopus.tools.IsNullOrEmpty(item)) {
                o.$set(o.functionCheckData, item, true);
              }
            });
          }

          // let datarrrr = this.octopus.tools.parseCell(data.content, "ProjectList").defaultValue;
          // alert(datarrrr);

          this.tree.buildList.data.parentValue = "A_" + this.octopus.tools.parseCell(data.content, "CompanyID").defaultValue;
          this.tree.buildList.control.load();

          // console.error(JSON.stringify(data));
          // console.error(JSON.stringify(this.list.role.data));
        }
        // 因为弹出是请求数据之前，所以500毫秒足以。
        setTimeout(function () {
          if (o.panel.visible == true) {
            o.systemTab = "sys_1";
          }
        }, 500);
      },
      save: function (data) {
        this.octopus.tips.success(data);
        // 刷新list
        this.list.role.control.load();
        this.back();
      },
      back: function () {
        this.reloadFunction = false;
        this.panel.visible = false;
      },
      // 选中的功能包
      checkFunction: function (value) {
        let FunctionData = [];
        for (let code in this.functionCheckData) {
          let ac = this.functionCheckData[code];
          if (ac) {
            FunctionData.push(code);
          }
        }
        // 每次选择/取消 更新功能包字段。
        $(this.item.role.data.cellData).each(function (index, item) {
          if (item.name == "FunctionData") {
            item.defaultValue = FunctionData;
          }
        });

      },
      // 加载树控件默认值。
      loadTree: function (tree_data) {
        let data = this.octopus.tools.parseCell(this.item.role.data, "BuildingList").defaultValue;
        if (data) {
          let tree_list = [];
          data.map(item => {
            tree_list.push("C_" + item)
          });
          // console.warn(tree_list);
          // let data_list = data;
          // console.error("LT：" + data + "，LIST：" + tree_list);
          this.tree.buildList.control.setCheckedKeys(tree_list);
        }


      },
      // 已经选中的项目及建筑信息
      checkProjectAndBuilding: function (node) {
        // 获取选中的节点
        let o = this;
        // this.tree_nodes = node.checkedNodes;
        this.project_list = [];
        this.building_list = [];
        // 循环选中的节点
        node.checkedNodes.map(item => {
          addTreeNode(item);
        });
        // 循环半选中的节点
        node.halfCheckedNodes.map(item => {
          addTreeNode(item);
        });

        function addTreeNode(item) {
          // 标记为项目
          if (item.TypeID == "B") {
            o.project_list.push(item.ID);
          }
          // 标记为楼宇
          if (item.TypeID == "C") {
            o.building_list.push(item.ID);
          }
          // 打印对象
          // console.warn(item);
        }

        this.octopus.tools.parseCell(this.item.role.data, "ProjectList").defaultValue = this.project_list;
        this.octopus.tools.parseCell(this.item.role.data, "BuildingList").defaultValue = this.building_list;

        // 根据选中的
      }
    },
    props: ["oData"]
  }
</script>

